'use strict'
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import LinearGradient from 'react-native-linear-gradient'

export const RxO_horizontal = 'horizontal'
export const RxO_vertical = 'vertical'
export const RxO_leftTopRightBottom = 'left_top_right_bottom'
export const RxO_rightTopLeftBottom = 'right_top_left_bottom'

export default class RxLinearGradient extends Component {
  static propTypes = {
    style: PropTypes.any,
    orientation: PropTypes.oneOf([
      RxO_horizontal,
      RxO_vertical,
      RxO_leftTopRightBottom,
      RxO_rightTopLeftBottom,
    ]),
    colors: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string])),
  }

  static defaultProps = {
    style: {flex: 1},
    orientation: RxO_horizontal,

    // colors: ['#FC8936', '#FCC636'], // 黄色渐变
    // colors: ['#93D7F0', '#93D7F0'], // 浅蓝渐变
    colors: ['rgb(0,184,224)', 'rgb(0,143,238)'], //蓝色渐变
  }

  constructor(props) {
    super(props)
  }

  render() {
    const {style, children, colors, orientation, ...other} = this.props
    // console.log('RxLinearGradient style=', style)

    var startPoint = {x: 0, y: 0}
    var endPoint = {x: 1, y: 0}

    if (orientation === RxO_vertical) {
      startPoint = {x: 1, y: 0}
      endPoint = {x: 1, y: 1}
    } else if (orientation === RxO_leftTopRightBottom) {
      startPoint = {x: 0, y: 0}
      endPoint = {x: 1, y: 1}
    } else if (orientation === RxO_rightTopLeftBottom) {
      startPoint = {x: 1, y: 0}
      endPoint = {x: 0, y: 1}
    }
    return (
      <LinearGradient
        {...other}
        style={style}
        colors={colors}
        start={startPoint}
        end={endPoint}>
        {children}
      </LinearGradient>
    )
  }
}
